import st from './tabs.module.css'
const DateTabs = ({ setTab, tab }: any) => {
    const datelist = [
        { id: 1, date: '今日', value: 'today' },
        { id: 2, date: '昨日', value: 'yesterday' },
        { id: 3, date: '上周', value: 'last-week' },
        { id: 4, date: '本周', value: 'current-week' },
        { id: 5, date: '上月', value: 'last-month' },
        { id: 6, date: '本月', value: 'current-month' },]
    return (<div className={st.tabsBox}>
        {datelist.map((item) => <TabItem 
        key={item.id} 
        item={item}
        // 切换tab显示，并重新发送请求，bug1数据竞态 
        setTab={setTab} 
        tab={tab} />)}
    </div>)
}

const TabItem = ({ item, setTab, tab }: any) => {
    return <div className={tab === item.value ?st.tabAct: st.tab} onClick={() => setTab(item.value)} >{item.date}</div>
}

export default DateTabs